<template>
  <div class="card" style="height: 100%">
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <!-- <el-tab-pane label="规格管理" name="specifications">
        <SpecificationManage v-if="activeName === 'specifications'" />
      </el-tab-pane> -->
      <el-tab-pane label="查看做法" name="method">
        <MethodManage v-if="activeName === 'method'" />
      </el-tab-pane>
      <el-tab-pane label="查看加料" name="supplement">
        <SupplementMange v-if="activeName === 'supplement'" />
      </el-tab-pane>
      <!-- <el-tab-pane label="单位管理" name="unit">
        <UnitManage v-if="activeName === 'unit'" />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="标签管理" name="label">
        <LabelManage v-if="activeName === 'label'" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="goodsAttribute">
import { ref } from "vue";
import type { TabPaneName } from "element-plus";
// import SpecificationManage from "./specificationManage.vue";
import MethodManage from "./methodManage.vue";
// import UnitManage from "./unitManage.vue";
import SupplementMange from "./supplementMange.vue";
// import LabelManage from "./labelManage.vue";

const activeName = ref("method");

const handleClick = (name: TabPaneName) => {
  console.log("handleClick", name);
};
</script>

<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap::after) {
  display: none;
}
</style>
